<template>
  <div class="pad">
    <h2>生命周期</h2>
    <h2>1.onMounted</h2>
    <SonDemo1 class="grouq"></SonDemo1>
    <SonDemo2 class="grouq"></SonDemo2>
    <SonDemo3 class="grouq"></SonDemo3>
    <SonDemo4 class="grouq"></SonDemo4>
    <SonDemo5 class="grouq"></SonDemo5>
    <h2>2.onUnmounted</h2>
    <SonDemo6 class="grouq"></SonDemo6>
    <SonDemo7 class="grouq"></SonDemo7>
    <SonDemo8 class="grouq"></SonDemo8>
    <SonDemo9 class="grouq"></SonDemo9>
    <h2>3.onUpdated</h2>
    <SonDemo10 class="grouq"></SonDemo10>
    <SonDemo11 class="grouq"></SonDemo11>
    <SonDemo12 class="grouq"></SonDemo12>
  </div>
</template>

<script setup lang="ts">
import SonDemo1 from './Shengming/SonDemo1.vue'
import SonDemo2 from './Shengming/SonDemo2.vue'
import SonDemo3 from './Shengming/SonDemo3.vue'
import SonDemo4 from './Shengming/SonDemo4.vue'
import SonDemo5 from './Shengming/SonDemo5.vue'
import SonDemo6 from './Shengming/SonDemo6.vue'
import SonDemo7 from './Shengming/SonDemo7.vue'
import SonDemo8 from './Shengming/SonDemo8.vue'
import SonDemo9 from './Shengming/SonDemo9.vue'
import SonDemo10 from './Shengming/SonDemo10.vue'
import SonDemo11 from './Shengming/SonDemo11.vue'
import SonDemo12 from './Shengming/SonDemo12.vue'
</script>

<style lang="scss" scoped>
.pad {
  padding: 10px;
  .grouq {
    border: 2px solid skyblue;
    padding: 10px;
    margin: 10px;
  }
}
</style>
